const gameContainer=document.querySelector('.container')
const allMoleItems=document.querySelectorAll('.item')
let startGame,startTime,countDown=20,score=0;
const timeCount=document.getElementById('time-count');
const scoreCount=document.getElementById('score-count')

gameContainer.addEventListener('click',function(e){
    if(e.target.classList.contains('mole-cliked')){
        // console.log("yug");
        score++;
        scoreCount.innerHTML=score
        
    }
})

// 在javascript 中，
// DOMContentLoaded 事件是文档加载完成时触发的事件，
// 文档加载完成是指DOM结构
// 加载完成，不用考虑其它资源，比如图片等；
document.addEventListener('DOMContentLoaded',()=>{
    startTime=setInterval(()=>{
        timeCount.innerHTML=countDown
        countDown--
    },1000)
    startGame=setInterval(()=>{
        showMole();
    },600)
})

// showMole
function showMole(){
    if(countDown<=0){
        clearInterval(startGame)
        clearInterval(startTime)
        timeCount.innerHTML="0"
    }
    let moleToAppear=allMoleItems[getRandomValue()].querySelector('.mole')
    moleToAppear.classList.add('mole-appear')
    hideMole(moleToAppear)
}
function getRandomValue(){
    let rand =Math.random()*allMoleItems.length
    return Math.floor(rand)
}
// hideMole
function hideMole(moleItem){
    setTimeout(()=>{
        moleItem.classList.remove("mole-appear")
    },1000)
}